<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Reader</title>
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<!--主界面部分-->
		<div id="menuBody" class="mui-content" v-cloak>
			<header class="mui-bar mui-bar-nav" style="position: inherit;">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">{{title}}</h1>
			</header>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" v-for="(item,index) in chapters" v-bind:class="{'mui-active':index==chapterIndex}">
					<a class="mui-navigate-right" v-on:click="loadChapter(index)">
						{{item.title}}
					</a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var readerTxt;
			var menu = new Vue({
				el: '#menuBody',
				data: {
					title: "",
					href: "",
					chapters: [],
					chapterIndex: 0
				},
				methods: {
					loadChapter: function(index) {
						this.chapterIndex = index;
						readerTxt = readerTxt || plus.webview.getWebviewById("readerTxt");
						mui.fire(readerTxt, "loadContent", {
							chapterIndex: index,
							chapters: this.chapters,
							href: this.href
						});
						var sourcePage = plus.webview.getWebviewById("source.html");
						if (sourcePage) {
							sourcePage.hide();
						}
						plus.webview.currentWebview().hide();
					}
				}
			});
			window.addEventListener("beforeShow", function(e) {
				if (e.detail == null) {
					return;
				}
				var info = e.detail;
				menu.chapterIndex = info.chapterIndex;
				if (menu.chapters.length != info.chapters.length || menu.chapters[0].link != info.chapters[0].link) {
					menu.chapters = info.chapters;
				}
				menu.$nextTick(function() {
					var current = mui(".mui-active");
					if (current.length <= 0) {
						return;
					}
					window.scrollTo(0, current[0].offsetTop - 100);
				});
			});
			window.addEventListener("refresh", function(e) {
				if (!e.detail) {
					return;
				}
				var info = e.detail;
				menu.chapterIndex = info.chapterIndex;
				menu.title = info.title;
				menu.href = info.href;
				menu.chapters = info.chapters;
				menu.$nextTick(function() {
					var current = mui(".mui-active");
					if (current.length <= 0) {
						return;
					}
					window.scrollTo(0, current[0].offsetTop - 100);
				});
			});
			window.addEventListener("changeSource", function(e) {
				if (!e.detail) {
					return;
				}
				var source = e.detail;
				menu.chapterIndex = -1;
				menu.chapters = source.chapters;
				menu.href = source.href;
			});
		</script>
	</body>

</html>
